<template>
    <view class="footer-view">
        <scroll-view :scroll-top="0" scroll-y="true" :style="{ height: listHeight + 'rpx' }">
            <eui-card :title="mainData.c_provider_name" showTitleLine="true" h-padding="20" @click="changeBasicStatus">
                <template v-slot:extra>
                    <view class="extra-view">
                        <eui-text type="name" :value="getDictName('合同操作类型', mainData.c_oper_type)"
                            style="font-size: 24rpx;" />
                    </view>
                </template>
                <view v-if="showBasic" class="m-main-top">
                    <eui-text
                        :value="(mainData.c_st_dt ? mainData.c_st_dt.substring(0, 10) : '') + ' ~ ' + (mainData.c_en_dt ? mainData.c_en_dt.substring(0, 10) : '')"
                        type="name" title="合同日期" occupy />
                    <eui-text :value="getDictName('经营方式', mainData.c_con_type)" type="name" title="经营方式" />
                    <eui-text :value="feeMainItems.find(x => x.value === mainData.c_con_main)?.title || ''" type="name"
                        title="合同主体" />
                    <eui-text :value="mainData.c_con_code" type="name" title="文本号" />
                    <eui-text :value="mainData.c_title" type="name" title="合同标的" occupy />
                    <eui-text :value="mainData.c_descript" type="name" title="合同描述" occupy />
                    <eui-text :value="mainData.c_store_id" :name="getRelatedName('rdsStores', mainData.c_store_id)"
                        type="titlename" title="签约机构" occupy />
                    <eui-text :value="mainData.c_effect_dt" type="date" title="签订时间" />
                </view>
            </eui-card>
            <eui-card title="业务信息" showTitleLine="true" h-padding="20" type="upDownSingle">
                <template v-slot:content>
                    <view class="m-main-top">
                        <eui-text :value="getRelatedName('rdsPayTypes', mainData.c_pay_type)" type="name" title="结算方式"
                            occupy />
                        <eui-text :value="getDictName('联营成本计算依据', contractUrData.c_cost_base)" type="name"
                            title="成本计算依据" v-if="['4', '5'].includes(mainData.c_con_type)" occupy />
                        <eui-text :value="getDictName('供应商采购模式', mainData.c_region_type)" type="name" title="采购模式"
                            v-if="['1', '2', '3'].includes(mainData.c_con_type)" />
                        <eui-text :value="getRelatedName('rdsRegions', mainData.c_region_no)" type="name" title="采购区域"
                            v-if="['1', '2', '3'].includes(mainData.c_con_type)" />
                        <eui-text :value="getDictName('是非', contractUrData.c_credit_center)" type="name" title="银行卡集中"
                            v-if="['5'].includes(mainData.c_con_type)" />
                        <eui-text :value="getDictName('是非', contractUrData.c_mobile_center)" type="name" title="在线支付集中"
                            v-if="['5'].includes(mainData.c_con_type)" />
                        <eui-text :value="getDictName('是非', contractUrData.c_cash_center)" type="name" title="现金集中"
                            v-if="['5'].includes(mainData.c_con_type)" occupy />
                        <eui-text :value="getRelatedName('rdsGdsclasses', contractUrData.c_counter_form)" type="name"
                            title="商铺业态" v-if="['5'].includes(mainData.c_con_type)" />
                        <eui-text :value="contractUrData.c_counter_name" type="name" title="店招"
                            v-if="['5'].includes(mainData.c_con_type)" />
                    </view>
                </template>
            </eui-card>
            <view v-if="storeList.length > 0 || adnoList.length > 0 || ccodeList.length > 0 || bcodeList.length > 0">
                <view style="margin: 20rpx 20rpx -45rpx 20rpx;">
                    <eui-tab :tabs="tabData" :spaceLeft="spaceLeft" :value="tabIndex" @change="tabChange"
                        showBadge="true">
                    </eui-tab>
                </view>
                <view v-if="tabIndex == 0"
                    :style="storeList.length > 0 ? 'margin-bottom: 0rpx' : 'margin-bottom: 60rpx'">
                    <eui-card h-padding="20" type="detail" topMargin="0" hMargin="0" v-if="storeList.length > 0">
                        <scroll-view :scroll-top="0" scroll-y="true">
                            <view v-for="(item, index) in storeList"
                                style="width: 100%;display: grid;grid-template-columns: 75% 25%;border-bottom: 1rpx solid #c8c7cc;font-size: 24rpx;padding: 10rpx 0rpx;">
                                <eui-text title="" :value="item.c_store_id" :name="item.c_store_name"
                                    type="titlename" v-if="item.c_store_id" />
                                <eui-text title="" :value="item.c_gid" :name="item.c_gname"
                                    type="titlename" v-else-if="item.c_gid" />
                                <eui-text title="" :value="item.c_store_region" :name="item.c_store_region_name"
                                    type="titlename" v-else-if="item.c_store_region" />
                                <eui-text title="" :value="getDictName('机构业态', item.c_store_class)"
                                    type="name" v-else-if="item.c_store_class" />
                                <eui-text title="" :value="getDictName('范围合作状态', item.c_flag)" type="name"
                                    class="text-small" valueStyle="font-size: 24rpx;color: #02b7e6" />
                                <eui-text type="name"
                                    :title="`有效日期： ${item.c_st_dt.substring(0, 10)} ~ ${item.c_en_dt.substring(0, 10)}`"
                                    occupy v-if="item.c_dt_type === '1'" class="text-small" />
                            </view>
                        </scroll-view>
                    </eui-card>
                </view>
                <view v-if="tabIndex == 1"
                    :style="adnoList.length > 0 ? 'margin-bottom: 0rpx' : 'margin-bottom: 60rpx'">
                    <eui-card h-padding="20" type="detail" topMargin="0" hMargin="0" v-if="adnoList.length > 0">
                        <scroll-view :scroll-top="0" scroll-y="true">
                            <view v-for="(item, index) in adnoList"
                                style="width: 100%;display: grid;grid-template-columns: 75% 25%;border-bottom: 1rpx solid #c8c7cc;font-size: 24rpx;padding: 10rpx 0rpx;">
                                <eui-text title="" :value="item.c_range_code" type="titlename"
                                    :name="getRelatedName('rdsDeparts', item.c_range_code)" />
                                <eui-text title="" :value="getDictName('范围合作状态', item.c_flag)" type="name"
                                    class="text-small" valueStyle="font-size: 24rpx;color: #02b7e6" />
                            </view>
                        </scroll-view>
                    </eui-card>
                </view>
                <view v-if="tabIndex == 2"
                    :style="ccodeList.length > 0 ? 'margin-bottom: 0rpx' : 'margin-bottom: 60rpx'">
                    <eui-card h-padding="20" type="detail" topMargin="0" hMargin="0" v-if="ccodeList.length > 0">
                        <scroll-view :scroll-top="0" scroll-y="true">
                            <view v-for="(item, index) in ccodeList"
                                style="width: 100%;display: grid;grid-template-columns: 75% 25%;border-bottom: 1rpx solid #c8c7cc;font-size: 24rpx;padding: 10rpx 0rpx;">
                                <eui-text title="" :value="item.c_range_code" type="titlename"
                                    :name="getRelatedName('rdsGdsclasses', item.c_range_code)" />
                                <eui-text title="" :value="getDictName('范围合作状态', item.c_flag)" type="name"
                                    class="text-small" valueStyle="font-size: 24rpx;color: #02b7e6" />
                            </view>
                        </scroll-view>
                    </eui-card>
                </view>
                <view v-if="tabIndex == 3"
                    :style="bcodeList.length > 0 ? 'margin-bottom: 0rpx' : 'margin-bottom: 60rpx'">
                    <eui-card h-padding="20" type="detail" topMargin="0" hMargin="0" v-if="bcodeList.length > 0">
                        <scroll-view :scroll-top="0" scroll-y="true">
                            <view v-for="(item, index) in bcodeList"
                                style="width: 100%;display: grid;grid-template-columns: 75% 25%;border-bottom: 1rpx solid #c8c7cc;font-size: 24rpx;padding: 10rpx 0rpx;">
                                <eui-text title="" :value="item.c_range_code" type="titlename"
                                    :name="getRelatedName('rdsBrands', item.c_range_code)" />
                                <eui-text title="" :value="getDictName('范围合作状态', item.c_flag)" type="name"
                                    class="text-small" valueStyle="font-size: 24rpx;color: #02b7e6" />
                            </view>
                        </scroll-view>
                    </eui-card>
                </view>
            </view>
            <eui-card :title="mainData.c_section == 'D' ? '签约多经点' : '签约铺位'" showTitleLine="true" h-padding="20"
                type="upDownSingle" v-if="contractCounter.length > 0">
                <template v-slot:content>
                    <scroll-view scroll-y="true"
                        style="width: 100%;min-height: 10px;max-height:400px;box-sizing: border-box;overflow-y: scroll;">
                        <view v-for="(item, index) in contractCounter"
                            style="width: 100%;display: grid;grid-template-columns: 28% 47% 25%;border-bottom: 1rpx solid #c8c7cc;font-size: 24rpx;padding: 10rpx 0rpx;">
                            <eui-text :value="item.c_counter_no" type="name" title="" />
                            <eui-text :value="item.c_rent_area.toFixed(2)" type="name" title="计租面积：" />
                            <eui-text :value="getDictName('合作状态', item.c_status)" type="name" title=""
                                class="text-small" valueStyle="font-size: 24rpx;color: #02b7e6" />
                            <eui-text type="name" :title="`[${item.c_store_id}]${item.c_store_name}`" class="text-small"
                                occupy />
                        </view>
                    </scroll-view>
                </template>
            </eui-card>
            <eui-card title="合同费用" showTitleLine="true" h-padding="20" type="upDownSingle"
                v-if="contractFeeData.length > 0">
                <template v-slot:content>
                    <scroll-view scroll-y="true" style="width: 100%;box-sizing: border-box;overflow-y: scroll;">
                        <view v-for="(item, index) in contractFeeData">
                            <view class="m-list-top">
                                <eui-text :value="item.c_article_name || item.c_fee_name" type="name"
                                    style="margin-left: -8rpx;" />
                                <eui-text type="name"
                                    :value="`${item.c_dt_start.substring(0, 10)} ~ ${item.c_dt_end.substring(0, 10)}`"
                                    class="text-small" valueStyle="color:#888888" />
                                <eui-text :value="item.c_profit_bottom" type="price" title="保底金额"
                                    v-if="!['5', '7'].includes(item.c_base_kind)" />
                                <eui-text :value="item.c_amount" type="price" title="费用金额"
                                    v-if="['5', '7'].includes(item.c_base_kind)" />
                                <eui-text value="查看详情" type="link" @click="feeDetail(item)"
                                    style="text-align: right;margin-right: 50rpx" class="text-small" />
                            </view>
                        </view>
                    </scroll-view>
                </template>
            </eui-card>
        </scroll-view>
    </view>
    <eui-popup ref="feePopup" background-color="#f8f8f8" type="bottom" :mask-click="true">
        <view class="popup-content">
            <view class="popup-title">{{ `[${feeDetailData.c_fee_code}]${feeDetailData.c_fee_name}` }}</view>
            <scroll-view scroll-y="true"
                style="width: 100%;max-height:800rpx;box-sizing: border-box;overflow-y: scroll;">
                <eui-card :title="`[${feeDetailData.c_fee_code}]${feeDetailData.c_fee_name}`" showTitleLine="true"
                    h-padding="20" type="detail">
                    <view class="m-main-top">
                        <eui-text :value="getRelatedName('rdsSettles', feeDetailData.c_settle_region)" type="name"
                            title="结算分区" />
                        <eui-text :value="getDictName('供应商收费征收方式', feeDetailData.c_pay_method)" type="name"
                            title="征收方式" />
                        <eui-text :value="feeMainItems.find(x => x.value === feeDetailData.c_fee_main)?.title"
                            type="name" title="征收主体" />
                        <eui-text :value="feeDetailData.c_dt_start" type="date" title="开始日期" />
                        <eui-text :value="feeDetailData.c_dt_end" type="date" title="结束日期" />
                        <eui-text :value="feeDetailData.c_tax_rate" type="price" title="税率(%)" />
                        <eui-text :value="getDictName('是非', feeDetailData.c_is_offset_tax)" type="name" title="是否票扣" />
                        <eui-text :value="getDictName('征收状态', feeDetailData.c_status)" type="name" title="征收状态" />
                        <eui-text :value="getDictName('是或否', feeDetailData.c_auto_renew)" type="name" title="自动续签" />
                    </view>
                </eui-card>
                <eui-card title="收费定义" showTitleLine="true" h-padding="20">
                    <view class="m-main-top">
                        <eui-text :value="getDataRuleName(feeDetailData.c_date_rule)" type="name" title="征收规则" occupy />
                        <eui-text :value="getLateFeeRuleName(feeDetailData.c_late_fee_rule)" type="name" title="滞纳金规则"
                            occupy />
                        <eui-text :value="baseTypeItems.find(x => x.value === feeDetailData.c_base)?.title" type="name"
                            title="收费基数" occupy />
                        <eui-text :value="feeDetailData.c_profit_bottom" type="price" title="保底金额"
                            v-if="!['5', '7'].includes(kind)" />
                        <eui-text :value="feeDetailData.c_a_base" type="price" title="收费门槛"
                            v-if="baseLevel == 1 && baseVisiable" />
                        <eui-text :value="feeDetailData.c_a_fee" type="price" title="费用金额"
                            v-if="baseLevel == 1 && feeVisiable" />
                        <eui-text :value="feeDetailData.c_rate" type="price" :title="isNumber ? '收费单价' : '费率(%)'"
                            v-if="baseLevel == 1 && rateVisiable" />
                        <eui-text :value="feeDetailData.c_amount" type="price" title="费用金额"
                            v-if="feeDetailData.c_calc_type == '0'" />
                        <eui-text :value="feeDetailData.c_dt" type="date" title="征收日期"
                            v-if="['1', '4'].includes(feeDetailData.c_dt_type)" />
                    </view>
                    <view class="m-main-top">
                        <eui-text :value="feeDetailData.c_a_base" type="price" title="门槛1"
                            v-if="baseLevel > 1 && baseVisiable" />
                        <eui-text :value="feeDetailData.c_a_fee" type="price" title="金额1"
                            v-if="baseLevel > 1 && feeVisiable" />
                        <eui-text :value="feeDetailData.c_rate" type="price" :title="isNumber ? '单价1' : '费率1(%)'"
                            v-if="baseLevel > 1 && rateVisiable" />

                        <eui-text :value="feeDetailData.c_a_base2" type="price" title="门槛2"
                            v-if="baseLevel > 1 && baseVisiable" />
                        <eui-text :value="feeDetailData.c_a_fee2" type="price" title="金额2"
                            v-if="baseLevel > 1 && feeVisiable" />
                        <eui-text :value="feeDetailData.c_rate2" type="price" :title="isNumber ? '单价2' : '费率2(%)'"
                            v-if="baseLevel > 1 && rateVisiable" />

                        <eui-text :value="feeDetailData.c_a_base3" type="price" title="门槛3" v-if="baseLevel > 2" />
                        <eui-text :value="feeDetailData.c_a_fee3" type="price" title="金额3"
                            v-if="baseLevel > 2 && feeVisiable" />
                        <eui-text :value="feeDetailData.c_rate3" type="price" :title="isNumber ? '单价3' : '费率3(%)'"
                            v-if="baseLevel > 2 && rateVisiable" />

                        <eui-text :value="feeDetailData.c_a_base4" type="price" title="门槛4" v-if="baseLevel > 3" />
                        <eui-text :value="feeDetailData.c_a_fee4" type="price" title="金额4"
                            v-if="baseLevel > 3 && feeVisiable" />
                        <eui-text :value="feeDetailData.c_rate4" type="price" :title="isNumber ? '单价4' : '费率4(%)'"
                            v-if="baseLevel > 3 && rateVisiable" />

                        <eui-text :value="feeDetailData.c_a_base5" type="price" title="门槛5" v-if="baseLevel > 4" />
                        <eui-text :value="feeDetailData.c_a_fee5" type="price" title="金额5"
                            v-if="baseLevel > 4 && feeVisiable" />
                        <eui-text :value="feeDetailData.c_rate5" type="price" :title="isNumber ? '单价5' : '费率5(%)'"
                            v-if="baseLevel > 4 && rateVisiable" />
                    </view>
                </eui-card>
                <eui-card title="费用生成" showTitleLine="true" h-padding="20">
                    <view class="m-main-top">
                        <eui-text :value="getDictName('按机构生成级次', feeDetailData.c_gen_store_level)" type="name"
                            title="机构生成层级" occupy />
                        <eui-text :value="getDictName('按部门生成级次', feeDetailData.c_gen_adno_level)" type="name"
                            title="部门生成层级" />
                        <eui-text :value="getDictName('按类别生成级次', feeDetailData.c_gen_class_level)" type="name"
                            title="品类生成层级" />
                        <eui-text :value="getDictName('按品牌生成级次', feeDetailData.c_gen_brand_level)" type="name"
                            title="品牌生成层级" />
                        <eui-text :value="getDictName('是非', feeDetailData.c_gen_tax_rate)" type="name" title="按税率生成" />
                    </view>
                </eui-card>
                <eui-card title="费用分配" showTitleLine="true" h-padding="20">
                    <view class="m-main-top">
                        <eui-text :value="getDictName('按机构分配级次', feeDetailData.c_alloc_store_level)" type="name"
                            title="机构分配层级" occupy />
                        <eui-text :value="getDictName('按部门分配级次', feeDetailData.c_alloc_adno_level)" type="name"
                            title="部门分配层级" />
                        <eui-text :value="getDictName('按类别分配级次', feeDetailData.c_alloc_class_level)" type="name"
                            title="品类分配层级" />
                        <eui-text :value="getDictName('按品牌分配级次', feeDetailData.c_alloc_brand_level)" type="name"
                            title="品牌分配层级" />
                        <eui-text :value="getDictName('是非', feeDetailData.c_alloc_tax_rate)" type="name"
                            title="按税率分配" />
                    </view>
                </eui-card>
            </scroll-view>
        </view>
    </eui-popup>
</template>

<script setup type="ts">
import service from '@/common/service';
import { getRelatedName, getDataRuleName, getLateFeeRuleName } from '../RdsViews/components/RelatedName.js';
import { getRdsUrl, rdsRequest } from '@/hooks/rdsServices';
import { onMounted, ref } from "vue";
import { useBaseType } from '@/hooks/useBaseType';
import { useFeeHook } from '@/hooks/useFeeHook'
const { feeMainItems } = useFeeHook();
const { baseTypeItems } = useBaseType();

const rdsUrl = getRdsUrl();
const disabled = ref(true);
const mainData = ref({});
const detailData = ref([]);
const contractCounter = ref([]);
const storeList = ref([]);
const adnoList = ref([]);
const bcodeList = ref([]);
const ccodeList = ref([]);
const contractUrData = ref([]);
const contractFeeData = ref([]);
const feeDetailData = ref([]);
const feePopup = ref(null);

const tabData = ref([{ name: '机构范围' }, { name: '部门范围' }, { name: '品类范围' }, { name: '品牌范围' }]);
const rdsDict = ref([])

const showBasic = ref(true);
const tabIndex = ref(0);
const spaceLeft = ref(6);

const kind = ref('');
const baseLevel = ref(0);
const rateVisiable = ref(true);
const feeVisiable = ref(true);
const baseVisiable = ref(true);
const isNumber = ref(true);


const props = defineProps({
    data: {
        type: Object
    },
    windowWidth: {
        type: Number,
        default: 0,
    }
});
const listHeight = ref(300);
onMounted(async () => {
    await getListHeight();
    service.enjoyShowLoading('正在加载...');
    await getAllDicData();
    if (props.data.BillId) {
        await billQuery(props.data.BillId);
    }
    service.enjoyHideLoading();
})

// 获取列表高度
const getListHeight = async () => {
    uni.getSystemInfo({
        success: function (res) { // res - 各种参数
            let info = uni.createSelectorQuery().select(".footer-view");
            info.boundingClientRect(function (data) { //data - 各种参数
                //获取列表高度
                let height = res.windowHeight - (data?.top || 0);
                //转换rpx
                listHeight.value = height / (res.windowWidth / 750) - 110;
            }).exec()
        }
    });
};
const tabChange = async (e) => {
    tabIndex.value = e;
}
const changeBasicStatus = () => {
    showBasic.value = !showBasic.value;
}
// 获取字典数据
const getAllDicData = async () => {
    rdsDict.value = await service.getLocalStorage('rdsDict');
};
const getDictName = (key, value) => {
    const dictMap = rdsDict.value.find(x => x.c_class_name === key && x.c_id === value);
    return dictMap ? dictMap.c_name : '';
};
// 获取单据详情信息
const billQuery = async (billId) => {
    if (!billId) {
        return;
    }
    const result = await rdsRequest(rdsUrl.bcApi, '合同审批单', 'EnjoyBillQuery', { BillId: billId, }, 'D21');
    if (result.ds.length > 0) {

        mainData.value = result.ds[0];
        detailData.value = result.ds1;
        contractCounter.value = result.ds5;
        storeList.value = result.ds7;
        console.log("storeList", storeList.value);
        adnoList.value = result.ds8.filter(x => x.c_range_type === 'D');
        bcodeList.value = result.ds8.filter(x => x.c_range_type === 'B');
        ccodeList.value = result.ds8.filter(x => x.c_range_type === 'C');
        contractFeeData.value = result.ds9;
        contractUrData.value = result.ds14[0];
    }
}

const feeDetail = (data) => {
    kind.value = data.c_base_kind || baseKind;
    baseLevel.value = data.c_base_level || 0;
    rateVisiable.value = ['1', '3'].includes(data.c_calc_type);
    feeVisiable.value = ['2'].includes(data.c_calc_type);
    baseVisiable.value = ['1', '2', '3'].includes(data.c_calc_type);
    isNumber.value = '9,A,B'.includes(data.c_base_kind);

    feeDetailData.value = data;
    feePopup.value.open();
    // setTimeout(() => {
    // uni.navigateTo({
    //     url: `/pages/AppTemps/contractFeeDetail`
    // });
    // }, 300);
}
</script>

<style lang="scss" scoped>
@import '@/static/font/enjoyicon/iconfont.css';
@import '@/main.scss';

.footer-view {
    display: flex;
    flex: 1;
    flex-direction: column;
}

.paging-view {
    display: flex;
    flex: 1;
    flex-direction: column;
    background: $uni-bg-color-inverse;
    border-radius: 20rpx;
    margin: 10rpx 20rpx;
    padding: 20rpx;
}


.m-main-top {
    width: 100%;
    display: grid;
    grid-template-columns: 51% 49%;
    font-size: 12px;
}

.m-list-top {
    width: 100%;
    display: grid;
    grid-template-columns: 51% 49%;
    border-bottom: 1rpx solid #c8c7cc;
    font-size: 12px;
    padding: 10rpx 0rpx;
}

.text-small {
    font-size: 22rpx;
    margin-left: 8rpx;
}


.popup-content {
    align-items: center;
    justify-content: left;
    flex-direction: column;
    // padding: 10rpx;
    width: 100%;
    background-color: #f8f8f8;
}

.popup-height {
    width: 200px;
}

.popup-title {
    width: 100%;
    flex: 1;
    color: #666666;
    font-size: 30rpx;
    line-height: 2em;
    text-align: center;
    border-bottom: 1rpx solid #cccccc;
}
</style>
